

var topoModel = {
	name:"",
	toolbar:"",
  	nodes:[
		{icon:"imgs/TCC4100.png" , x:200 , y:50 , w:55 , h:55 , type:"Switch",label:"172.16.21.51", id:"1",menu:"bdcom",status:"5"},
		{icon:"./imgs/TCC4100.png" , x:600 , y:50 , w:55 , h:55 , type:"Switch",label:"172.16.21.52", id:"2",menu:"bdcom",status:"5"},
		{icon:"./imgs/TCC4100.png" , x:390 , y:200 , w:55 , h:55 , type:"Switch",label:"172.16.21.53", id:"3",menu:"bdcom",status:"1"},
	 ],
	 links:[
			{}
	]
}

var nodeArray = null;
var linkArray = null;
var CVSFrames = 24;

function drawTopo(){
	var canvas = document.getElementById('topoCvs');
    var stage = new JTopo.Stage(canvas);
    var scene = new JTopo.Scene(stage);
    showJTopoToobar(stage);

    // scene.background = './imgs/azusa.jpg';
	scene.backgroundColor = "0,0,0";
	scene.alpha = 0.6;

	// stage.eagleEye.visible = true;

//	var linksModels = topoModel.links;
//	linkArray = new Array(linksModels.length);

	var nodeModels = topoModel.nodes;
	nodeArray = new Array(nodeModels.length);


	for(var i=0; i<nodeModels.length ;i++){
		var nodeModel = nodeModels[i];
		var tmpNode = new JTopo.Node(nodeModel.label);

		//此处传入的值需为number 类型
		tmpNode.setBound(nodeModel.x, nodeModel.y, nodeModel.w, nodeModel.h);

		tmpNode.setImage(nodeModel.icon);

		nodeArray[i] = tmpNode;
		scene.add(tmpNode);
	}

	var node = new JTopo.Node("自定义");				
		node.percent = 0.8;
		node.beginDegree = 0;
		node.width = node.height = 55;
		node.setLocation(10, 10);
		tmpNode.setImage("./imgs/TCC4100.png");
		node.paint = function(g){
			g.beginPath();
			g.moveTo(0,0);
			g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';
			g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);
			g.fill();				
			g.closePath();
			
			g.save();				
			g.beginPath();
			g.fillStyle = 'rgba(255,255,0,' + this.alpha + ')';
			g.moveTo(0,0);
			g.arc(0, 0, this.width/2-10, this.beginDegree, this.beginDegree + 2*Math.PI);				
			g.fill();
			g.closePath();								
			g.restore();
							
			this.paintText(g);
		};			
	scene.add(node);


	var link = myLink2(nodeArray[0], nodeArray[1], 'Link');
	scene.add(link);	
	var link3 = newLink(nodeArray[0], nodeArray[2], 'Link');
	scene.add(link3);

	var node1 = myNode('自定义',150, 226);
	node1.percent = 0.1;
	JTopo.Animate.stepByStep(node1, {
		percent: 1
	}, 5000, true).start();	


	scene.add(node1);

	var link2 = myLink(nodeArray[1], nodeArray[2], 'flow Link');
	scene.add(link2);
	flowing(link2);

	stage.frames = CVSFrames;
}


function flowing (myLink){
//	myLink.pos = myLink.pos + 10; 
	var changeLinkFlowPos = function(){
		var fcount = myLink.flowCount;
		var flowNodes = myLink.flowNodes;
		var gap = myLink.flowNodeGap;

		for(var a=0; a<fcount ;a++){
			if(!flowNodes[a].startFlag){
				if(a != 0){
					if(flowNodes[a-1].pos < gap){
						break;
					}
				}
			}
			flowNodes[a].pos = flowNodes[a].pos + myLink.flowSpeed;
			prePos = flowNodes[a].pos;
			flowNodes[a].startFlag = true;
		}
	}

	var tmp = 24;
	if(CVSFrames > 0 ){
		tmp  = CVSFrames;
	}
	window.setInterval(changeLinkFlowPos,1000/tmp);
}

// 简单连线
function newLink(nodeA, nodeZ, text, dashedPattern){
	var link = new JTopo.Link(nodeA, nodeZ, text);		
	link.lineWidth = 3; // 线宽
	link.dashedPattern = dashedPattern; // 虚线
	link.bundleOffset = 60; // 折线拐角处的长度
	link.bundleGap = 20; // 线条之间的间隔
	link.textOffsetY = 3; // 文本偏移量（向下3个像素）
	link.strokeColor = '0,200,255';
	return link;
}

//流动的简单连线
var useFlowLine = true;
function myLink(nodeA,nodeZ,text,dashedPattern){
	var link = new JTopo.Link(nodeA, nodeZ, text);

	link.prototype = link;

	link.lineWidth = 1; // 线宽
	link.dashedPattern = dashedPattern; // 虚线
	link.bundleOffset = 60; // 折线拐角处的长度
	link.bundleGap = 20; // 线条之间的间隔
	link.textOffsetY = 3; // 文本偏移量（向下3个像素）
	link.strokeColor = '0,200,255';

	link.flowCount = 5;			//流动点数
	link.flowRadius = 2;		//流动点半径
	link.flowSpeed = 1;//per milin second
	link.direction = 1;//  nodeA to nodeZ     || 2 nodeZ to nodeA
	link.flowNodeGap = 0;

	link.setFlowCount = function(flowCount){
		link.flowCount = flowCount;
		link.flowNodes = new Array(flowCount);
		for(var a=0; a<link.flowCount ;a++){
			link.flowNodes[a] = {pos:0,startFlag:false};
		}
	}

	if(useFlowLine){
		link.setFlowCount(link.flowCount);
	}



	link.prototype = link;

	//重写 PaintPath方法
	link.paintPath = function(g){
		var x1 = nodeA.x;
		var y1 = nodeA.y;
		x1 = x1 + nodeA.width/2;
		y1 = y1 + nodeA.height/2;

		var x2 = nodeZ.x;
		var y2 = nodeZ.y;
		x2 = x2 + nodeZ.width/2;
		y2 = y2 + nodeZ.height/2;

		g.save();

		g.moveTo(x1,y1);
		g.lineTo(x2,y2);
		g.strokeStyle = "blue";
		g.stroke();


		//若不需要流动 则直接返回
		if(!useFlowLine){
			return ;
		}

		if(link.direction == 2){
			var tmpx = x2 ;
			var tmpy = y2 ;
			x2 = x1 ;
			y2 = y1;
			x1 = tmpx;
			y1 = tmpy;
		}

		g.fillStyle = "rgba(143,230,178,1)";
		g.beginPath();

		var tmpa = x1 - x2;
		var tmpb = y1 - y2;
		var tmpc = Math.sqrt((tmpa*tmpa+tmpb*tmpb));
		var newNodeGap = tmpc/link.flowCount;
		if(newNodeGap != link.flowNodeGap){
			link.setFlowCount(link.flowCount);
			link.flowNodeGap = newNodeGap;
		}

		//循环画流动点
		for(var i=0; i<link.flowCount ;i++){

			var nodePos = link.flowNodes[i].pos;
			if(nodePos == 0){
				break;
			}
			if(nodePos > tmpc){
				nodePos = 1;
				link.flowNodes[i].pos = 1;
			}

			var tmpPercent = nodePos/tmpc;
			var tmpx = x1 - (tmpa * tmpPercent);
			var tmpy = y1 - (tmpb * tmpPercent);
			g.arc(tmpx, tmpy, link.flowRadius, 0, Math.PI * 2, true);

		}
		
		g.closePath();
		g.fill();

		g.restore();
	}

	return link;
}

function myLink2(nodeA,nodeZ,text,dashedPattern){
	var link = new JTopo.Link(nodeA, nodeZ, text);

	link.prototype = link;

	link.lineWidth = 1; // 线宽
	link.dashedPattern = dashedPattern; // 虚线
	link.bundleOffset = 60; // 折线拐角处的长度
	link.bundleGap = 20; // 线条之间的间隔
	link.textOffsetY = 3; // 文本偏移量（向下3个像素）
	link.strokeColor = '0,200,255';

	link.prototype = link;

	//重写 PaintPath方法
	link.paintPath = function(g){
		var x1 = nodeA.x;
		var y1 = nodeA.y;
		x1 = x1 + nodeA.width/2;
		y1 = y1 + nodeA.height/2;

		var x2 = nodeZ.x;
		var y2 = nodeZ.y;
		x2 = x2 + nodeZ.width/2;
		y2 = y2 + nodeZ.height/2;

		g.save();

		g.strokeStyle = "#2775a9";
		g.beginPath();
		g.moveTo(x1,y1);
		g.quadraticCurveTo( (x1+x2)/2-40 , (y1+y2)/2-40 ,x2, y2);
		g.stroke();
		g.closePath();

		g.restore();
	}

	return link;
}

function myNode(text, x, y){
	var node = new JTopo.Node(text);
	node.percent = 0.8;
	node.beginDegree = 0;
	node.width = node.height = 70;
	node.setLocation(x, y);
	node.textPosition = "Middle_Center";
	node.paint = function(g){
		g.save();
		g.beginPath();
		g.moveTo(0,0);
		g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';
		g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);
		g.fill();				
		g.closePath();

		g.beginPath();
		g.fillStyle = 'rgba(0,0,255,' + this.alpha + ')';
		g.moveTo(0,0);
		g.arc(0, 0, this.width/2-8, this.beginDegree, this.beginDegree + 2*Math.PI);				
		g.fill();
		g.closePath();								
		g.restore();							
		this.paintText(g);
	};
	return node;
}

function drawNomalIcon(ctx){
	ctx.fillStyle = "rgba(176,239,194,0.8)";
	var tmp = statusIconSize/2;
	ctx.arc(tmp, tmp, 100, tmp, Math.PI * 2, true);
}

function drawBadIcon(ctx){

}

function drawCancelMngIcon(ctx){

}
